<template>
  <a-modal
    :title="title"
    :width="1200"
    :visible="visible"
    :maskClosable="false"
    :confirmLoading="confirmLoading"
    @ok="handleOk"
    @cancel="handleCancel">
    <a-spin :spinning="confirmLoading">
      <!-- 主表单区域 -->
      <a-form :form="form">
        <a-row>

          <a-col :span="12">
            <a-form-item label="返乡地" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <j-dict-select-tag type="list" v-decorator="['addressBeforeReturn']" :trigger-change="true" dictCode="person_inflow" placeholder="请选择返乡地"/>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="到达本辖区时间" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <j-date placeholder="请选择到达本辖区时间" v-decorator="[ 'timeReturn', validatorRules.timeReturn]" :trigger-change="true" :show-time="true" date-format="YYYY-MM-DD HH:mm:ss" style="width: 100%"/>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="返乡前工作单位" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input v-decorator="[ 'workUnit', validatorRules.workUnit]" placeholder="请输入返乡前工作单位"></a-input>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="人员类型" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <j-dict-select-tag type="list" v-decorator="['personType']" :trigger-change="true" dictCode="type_personnel" placeholder="请选择人员类型"/>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="来人姓名" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input v-decorator="[ 'name', validatorRules.name]" placeholder="请输入来人姓名"></a-input>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="性别" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <j-dict-select-tag type="list" v-decorator="['sex']" :trigger-change="true" dictCode="sex" placeholder="请选择性别"/>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="年龄" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input v-decorator="[ 'age', validatorRules.age]" placeholder="请输入年龄"></a-input>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="身份证号" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input v-decorator="[ 'sfzh', validatorRules.sfzh]" placeholder="请输入身份证号"></a-input>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="乡镇" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <j-dict-select-tag type="list" v-decorator="['villages']" :trigger-change="true" dictCode="township_podu" placeholder="请选择乡镇"/>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="责任单位" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input v-decorator="[ 'accountabilityUnit', validatorRules.accountabilityUnit]" placeholder="请输入责任单位"></a-input>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="身份证地址" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input v-decorator="[ 'addressSfz', validatorRules.addressSfz]" placeholder="请输入身份证地址"></a-input>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="本辖区居住地" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input v-decorator="[ 'villageUnits', validatorRules.villageUnits]" placeholder="请输入本辖区居住地"></a-input>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="本人联系电话" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input v-decorator="[ 'contactNumber', validatorRules.contactNumber]" placeholder="请输入本人联系电话"></a-input>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="返乡时体温" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input v-decorator="[ 'thermogenic', validatorRules.thermogenic]" placeholder="请输入返乡时体温"></a-input>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="主要症状" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <j-multi-select-tag type="list_multi" v-decorator="['symptomatic']" :trigger-change="true" dictCode="cardinal_symptom" placeholder="请选择主要症状"/>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="返乡前居住地" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input v-decorator="[ 'returmingHome', validatorRules.returmingHome]" placeholder="请输入返乡前居住地"></a-input>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="离开武汉时间" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <j-date placeholder="请选择离开武汉时间" v-decorator="[ 'outOfTime', validatorRules.outOfTime]" :trigger-change="true" :show-time="true" date-format="YYYY-MM-DD HH:mm:ss" style="width: 100%"/>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="交通方式" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input v-decorator="[ 'fxTransportation', validatorRules.fxTransportation]" placeholder="请输入交通方式"></a-input>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="沿途停留点" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input v-decorator="[ 'stopOverPoint', validatorRules.stopOverPoint]" placeholder="请输入沿途停留点"></a-input>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="数据来源" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <j-dict-select-tag type="list" v-decorator="['dataSources']" :trigger-change="true" dictCode="sources" placeholder="请选择数据来源"/>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="目前状态" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <j-dict-select-tag type="list" v-decorator="['currentState']" :trigger-change="true" dictCode="monitoring" placeholder="请选择目前状态"/>
            </a-form-item>
          </a-col>

        </a-row>
      </a-form>

      <!-- 子表单区域 -->
      <a-tabs v-model="activeKey" @change="handleChangeTabs">
        <a-tab-pane tab="体温监控" :key="refKeys[0]" :forceRender="true">
          <j-editable-table
            :ref="refKeys[0]"
            :loading="temperatureCheckTable.loading"
            :columns="temperatureCheckTable.columns"
            :dataSource="temperatureCheckTable.dataSource"
            :maxHeight="300"
            :rowNumber="true"
            :rowSelection="true"
            :actionButton="true"/>
        </a-tab-pane>
        
        <a-tab-pane tab="密切接触者" :key="refKeys[1]" :forceRender="true">
          <j-editable-table
            :ref="refKeys[1]"
            :loading="personGohomeContactTable.loading"
            :columns="personGohomeContactTable.columns"
            :dataSource="personGohomeContactTable.dataSource"
            :maxHeight="300"
            :rowNumber="true"
            :rowSelection="true"
            :actionButton="true"/>
        </a-tab-pane>
        
        <a-tab-pane tab="监护小组" :key="refKeys[2]" :forceRender="true">
          <j-editable-table
            :ref="refKeys[2]"
            :loading="personGuardianshipTable.loading"
            :columns="personGuardianshipTable.columns"
            :dataSource="personGuardianshipTable.dataSource"
            :maxHeight="300"
            :rowNumber="true"
            :rowSelection="true"
            :actionButton="true"/>
        </a-tab-pane>
        
      </a-tabs>

    </a-spin>
  </a-modal>
</template>

<script>

  import pick from 'lodash.pick'
  import { FormTypes,getRefPromise } from '@/utils/JEditableTableUtil'
  import { JEditableTableMixin } from '@/mixins/JEditableTableMixin'
  import JDate from '@/components/jeecg/JDate'  
  import JDictSelectTag from "@/components/dict/JDictSelectTag"
  import JMultiSelectTag from "@/components/dict/JMultiSelectTag"

  export default {
    name: 'PersonGoHomeModal',
    mixins: [JEditableTableMixin],
    components: {
      JDate,
      JDictSelectTag,
      JMultiSelectTag,
    },
    data() {
      return {
        labelCol: {
          span: 6
        },
        wrapperCol: {
          span: 16
        },
        labelCol2: {
          span: 3
        },
        wrapperCol2: {
          span: 20
        },
        // 新增时子表默认添加几行空数据
        addDefaultRowNum: 1,
        validatorRules: {
          addressBeforeReturn: { rules: [{ required: true, message: '请输入返乡地!' }] },
          timeReturn: { rules: [{ required: true, message: '请输入到达本辖区时间!' }] },
          workUnit:{},
          personType: { rules: [{ required: true, message: '请输入人员类型!' }] },
          name: { rules: [{ required: true, message: '请输入来人姓名!' }] },
          sex: { rules: [{ required: true, message: '请输入性别!' }] },
          age:{},
          sfzh: { rules: [{ required: true, message: '请输入身份证号!' }] },
          villages:{},
          accountabilityUnit:{},
          addressSfz:{},
          villageUnits:{},
          contactNumber:{},
          thermogenic:{},
          symptomatic:{},
          returmingHome:{},
          outOfTime:{},
          fxTransportation:{},
          stopOverPoint:{},
          dataSources: { rules: [{ required: true, message: '请输入数据来源!' }] },
          currentState:{},
        },
        refKeys: ['temperatureCheck', 'personGohomeContact', 'personGuardianship', ],
        tableKeys:['temperatureCheck', 'personGohomeContact', 'personGuardianship', ],
        activeKey: 'temperatureCheck',
        // 体温监控
        temperatureCheckTable: {
          loading: false,
          dataSource: [],
          columns: [
            {
              title: '监测时间',
              key: 'detectionTime',
              type: FormTypes.datetime,
              width:"200px",
              placeholder: '请输入${title}',
              defaultValue: '',
            },
            {
              title: '监测情况',
              key: 'detectionSituation',
              type: FormTypes.select,
              dictCode:"monitoring",
              width:"200px",
              placeholder: '请输入${title}',
              defaultValue: '',
            },
            {
              title: '测量体温',
              key: 'temperature',
              type: FormTypes.input,
              width:"200px",
              placeholder: '请输入${title}',
              defaultValue: '',
            },
            {
              title: '测量体温责任人',
              key: 'temPerature',
              type: FormTypes.input,
              width:"200px",
              placeholder: '请输入${title}',
              defaultValue: '',
            },
            {
              title: '备注',
              key: 'remark',
              type: FormTypes.input,
              width:"200px",
              placeholder: '请输入${title}',
              defaultValue: '',
            },
          ]
        },
        // 密切接触者
        personGohomeContactTable: {
          loading: false,
          dataSource: [],
          columns: [
            {
              title: '接触类型',
              key: 'contactType',
              type: FormTypes.select,
              dictCode:"type_contact",
              width:"200px",
              placeholder: '请输入${title}',
              defaultValue: '',
            },
            {
              title: '姓名',
              key: 'name',
              type: FormTypes.input,
              width:"200px",
              placeholder: '请输入${title}',
              defaultValue: '',
            },
            {
              title: '性别',
              key: 'sex',
              type: FormTypes.select,
              dictCode:"sex",
              width:"200px",
              placeholder: '请输入${title}',
              defaultValue: '',
            },
            {
              title: '身份证号',
              key: 'idNumber',
              type: FormTypes.input,
              width:"200px",
              placeholder: '请输入${title}',
              defaultValue: '',
            },
            {
              title: '关系',
              key: 'socialRelation',
              type: FormTypes.input,
              width:"200px",
              placeholder: '请输入${title}',
              defaultValue: '',
            },
            {
              title: '联系电话',
              key: 'phoneNumber',
              type: FormTypes.input,
              width:"200px",
              placeholder: '请输入${title}',
              defaultValue: '',
            },
            {
              title: '备注',
              key: 'remark',
              type: FormTypes.input,
              width:"200px",
              placeholder: '请输入${title}',
              defaultValue: '',
            },
          ]
        },
        // 监护小组
        personGuardianshipTable: {
          loading: false,
          dataSource: [],
          columns: [
            {
              title: '责任人姓名',
              key: 'responPerson',
              type: FormTypes.input,
              width:"200px",
              placeholder: '请输入${title}',
              defaultValue: '',
            },
            {
              title: '职务',
              key: 'workingPosition',
              type: FormTypes.input,
              width:"200px",
              placeholder: '请输入${title}',
              defaultValue: '',
            },
            {
              title: '联系电话',
              key: 'contactNumber',
              type: FormTypes.input,
              width:"200px",
              placeholder: '请输入${title}',
              defaultValue: '',
            },
            {
              title: '备注',
              key: 'remarks',
              type: FormTypes.input,
              width:"200px",
              placeholder: '请输入${title}',
              defaultValue: '',
            },
          ]
        },
        url: {
          add: "/persongohome/personGoHome/add",
          edit: "/persongohome/personGoHome/edit",
          temperatureCheck: {
            list: '/persongohome/personGoHome/queryTemperatureCheckByMainId'
          },
          personGohomeContact: {
            list: '/persongohome/personGoHome/queryPersonGohomeContactByMainId'
          },
          personGuardianship: {
            list: '/persongohome/personGoHome/queryPersonGuardianshipByMainId'
          },
        }
      }
    },
    methods: {
      getAllTable() {
        let values = this.tableKeys.map(key => getRefPromise(this, key))
        return Promise.all(values)
      },
      /** 调用完edit()方法之后会自动调用此方法 */
      editAfter() {
        let fieldval = pick(this.model,'addressBeforeReturn','timeReturn','workUnit','personType','name','sex','age','sfzh','villages','accountabilityUnit','addressSfz','villageUnits','contactNumber','thermogenic','symptomatic','returmingHome','outOfTime','fxTransportation','stopOverPoint','dataSources','currentState')
        this.$nextTick(() => {
          this.form.setFieldsValue(fieldval)
        })
        // 加载子表数据
        if (this.model.id) {
          let params = { id: this.model.id }
          this.requestSubTableData(this.url.temperatureCheck.list, params, this.temperatureCheckTable)
          this.requestSubTableData(this.url.personGohomeContact.list, params, this.personGohomeContactTable)
          this.requestSubTableData(this.url.personGuardianship.list, params, this.personGuardianshipTable)
        }
      },
      /** 整理成formData */
      classifyIntoFormData(allValues) {
        let main = Object.assign(this.model, allValues.formValue)

        return {
          ...main, // 展开
          temperatureCheckList: allValues.tablesValue[0].values,
          personGohomeContactList: allValues.tablesValue[1].values,
          personGuardianshipList: allValues.tablesValue[2].values,
        }
      },
      validateError(msg){
        this.$message.error(msg)
      },
     popupCallback(row){
       this.form.setFieldsValue(pick(row,'addressBeforeReturn','timeReturn','workUnit','personType','name','sex','age','sfzh','villages','accountabilityUnit','addressSfz','villageUnits','contactNumber','thermogenic','symptomatic','returmingHome','outOfTime','fxTransportation','stopOverPoint','dataSources','currentState'))
     },

    }
  }
</script>

<style scoped>
</style>